<template>
  <div class="control" :style="styleSet">
    <w-table
      :data="rows"
      :columns="columns"
      :is-paging="false"
    />
  </div>
</template>

<script>
import moment from 'moment'
import { CensusTable } from '@/customForm/api/pageCalculate'
export default {
  components: {
  },
  props: {
    id: {
      type: String,
      default: null
    },
    query: {
      type: Object,
      default: null
    },
    width: {
      type: Number,
      default: null
    },
    height: {
      type: Number,
      default: null
    },
    item: {
      type: Object,
      default: null
    },
    contentWidth: {
      type: Number,
      default: null
    },
    extend: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      styleSet: {
        width: '100px',
        height: '70px'
      },
      colAlign: {
        0: 'left',
        1: 'center',
        2: 'right'
      },
      rows: [],
      colList: [],
      columns: [],
      isInit: false
    }
  },
  computed: {},
  watch: {
    width: {
      handler(val) {
        if (val && this.height && this.contentWidth) {
          this.init()
        }
      },
      immediate: true
    },
    height: {
      handler(val) {
        if (val && this.width && this.contentWidth) {
          this.init()
        }
      },
      immediate: true
    },
    contentWidth: {
      handler(val) {
        if (val && this.height && this.width) {
          this.init()
        }
      },
      immediate: true
    },
    item: {
      handler(val) {
        if (val) {
          this.reset()
        } else {
          this.control = null
        }
      },
      immediate: true
    }
  },
  mounted() {
  },
  methods: {
    initQuery() {
      this.$watch(
        () => {
          return this.query[this.id].ver
        },
        (newVal, oldVal) => {
          if (newVal !== oldVal) {
            this.load()
          }
        },
        { immediate: false }
      )
    },
    init() {
      let width = 0
      if (this.width === 23) {
        width = Math.round(this.contentWidth * 2 / 3) - 12
      } else {
        width = Math.round(this.contentWidth / this.width) - 12
      }
      this.styleSet = {
        width: width + 'px',
        maxHeight: (14 * this.height) + 'px'
      }
    },
    edit() {
      this.$emit('edit', this.id)
    },
    reset() {
      if (this.item.IsConfig) {
        this.initQuery()
        this.load()
      }
    },
    async load() {
      const res = await CensusTable({
        Id: this.id,
        Search: this.query[this.id].param.filter(c => c.Val != null || c.Vals != null),
        Extend: this.extend
      })
      this.columns = this.initCol(res.Column)
      if (res.Rows && res.Rows.length > 0) {
        res.Rows.forEach(c => {
          this.formatRow(c, res.Cols)
        })
        if (res.MergeCol && res.MergeCol.length > 0) {
          this.formatMerge(res.Rows, res.MergeCol)
        }
        this.rows = res.Rows
      } else {
        this.rows = []
      }
      this.isInit = true
    },
    formatMerge(rows, merge) {
      merge.forEach(c => {
        let index = 0
        let num = 1
        let key = null
        for (let i = 0; i < rows.length; i++) {
          const row = rows[i]
          const val = row[c]
          if (key == null) {
            index = 0
            key = val
            num = 1
          } else if (key !== val) {
            if (rows[index].rowSpan == null) {
              rows[index].rowSpan = {}
            }
            rows[index].rowSpan[c] = num
            index = i
            key = val
            num = 1
          } else {
            num += 1
          }
        }
        if (num > 1 && (index + 1) !== rows.length) {
          if (rows[index].rowSpan == null) {
            rows[index].rowSpan = {}
          }
          rows[index].rowSpan[c] = num
        }
      })
    },
    formatRow(row, colList) {
      colList.forEach(c => {
        const val = row[c.Name]
        if (val == null) {
          return
        } else if (c.FuncType !== 0) {
          row[c.Name] = c.Texts[val]
        } else if (c.DataType === 5) {
          if (val === true) {
            if (c.ColSet == null) {
              row[c.Name] = '是'
            } else {
              row[c.Name] = c.ColSet.ActiveText ? c.ColSet.ActiveText : '是'
            }
          } else {
            if (c.ColSet == null) {
              row[c.Name] = '否'
            } else {
              row[c.Name] = c.ColSet.InactiveText ? c.ColSet.InactiveText : '否'
            }
          }
        } else if (c.DataType === 3 || c.DataType === 6 || c.DataType === 9) {
          const format = c.ColSet ? c.ColSet['format'] : null
          if (format === 'time') {
            row[c.Name] = parseInt(val / 60) + ':' + (val % 60)
          } else if (format === 'ratio') {
            row[c.Name] = val + '%'
          }
        } else if (c.DataType === 7) {
          const format = c.ColSet ? c.ColSet['format'] : null
          if (format == null) {
            row[c.Name] = moment(val).format('YYYY-MM-DD HH:mm')
          } else {
            row[c.Name] = moment(val).format(format)
          }
        } else if (c.DataType === 8) {
          const format = c.ColSet ? c.ColSet['format'] : null
          if (format == null) {
            row[c.Name] = moment(val).format('YYYY-MM-DD')
          } else {
            row[c.Name] = moment(val).format(format)
          }
        }
      })
    },
    initCol(cols) {
      if (cols == null || cols.length === 0) {
        return []
      }
      return cols.map(c => {
        const col = {
          title: c.Label,
          key: c.Key
        }
        if (c.Children && c.Children.length > 0) {
          col.children = this.initCol(c.Children)
        } else {
          col.align = this.colAlign[c.Align]
          if (c.Width) {
            col.minWidth = c.Width + 'px'
          }
        }
        return col
      })
    }
  }
}
</script>
<style scoped>
.control .min {
  font-size: 3.2rem;
}

.control .md {
  font-size: 4.2rem;
}

.control .census {
  width: 100%;
  text-align: center;
  padding: 8px;
}

.control .max {
  font-size: 5.2rem;
}

.control .null {
  text-align: center;
  width: 100%;
  height: 100%;
  display: block;
}

.control .null span {
  vertical-align: middle;
}

.control .title .icon {
  float: right;
}

.control .title {
  line-height: 25px;
  font-weight: 400;
  padding: 5px;
  font-size: 1.1rem;
  letter-spacing: 1px;
  /* border-left: 3px solid #409eff; */
}
</style>
